<template>
  <view class="swiper-wrap w-center-750 pt-17px m-a pb-30rpx" v-if="list">
    <wd-swiper 
      v-if="list.length"
      autoplay
      v-model:current="current" 
      :list="list" 
      custom-indicator-class="custom-indicator-class"
      custom-image-class="custom-image"
      :value-key="list[current].thumbnailPreUrl ? 'thumbnailPreUrl' : 'preUrl'"
      :enable-preview="true"
      :imageMode="imageMode"
      @click="handleClick"
    ></wd-swiper>
    <wd-swiper 
      v-else
      autoplay
      v-model:current="current" 
      :list="defaultList" 
      custom-indicator-class="custom-indicator-class"
      custom-image-class="custom-image"
      value-key="preUrl"
      :enable-preview="true"
      :imageMode="imageMode"
      @click="handleClick"
    ></wd-swiper>
  </view>
</template>

<script lang="ts" setup>
import { PropType } from 'vue';

const current = ref(0);
const defaultList = ref([{}]);

const props = defineProps({
  list: {
    type: Array as PropType<any>,
    default: () => ([])
  },
  imageMode: {
    type: String,
    default: ''
  }
})

const handleClick = ({ item }) => {
  if (!item.preUrl) return;
}
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.swiper-wrap {
  overflow: hidden;

  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 34rpx 32rpx;
  --wot-swiper-nav-dot-color: #DEDBDB;
  --wot-swiper-nav-dot-active-color: #C7B8FD;
  
  :deep(.wd-swiper__item),
  :deep(.wd-swiper__track),
  :deep(.uni-swiper-wrapper) {
    overflow: visible;
  }

  :deep(.custom-indicator-class) {
    bottom: 0;
    transform: translate(-50%, 100%);
  }

  :deep(.custom-image) {
    border-radius: 24rpx;
    box-shadow: 2rpx 10rpx 18rpx 0 #00000040;
  }

  :deep(.uni-swiper-slides) {
    inset: 0 !important;
  }

  :deep(.wd-swiper__image) {
    height: 100% !important;
  }

  :deep(.wd-swiper-nav__item--dots) {
    margin: 0 6rpx;
    width: 16rpx;
    height: 16rpx;
  }

  :deep(.is-active) {
    transform: scale(1.2);
  }
}
</style>
